<template>
  <div class="gz-message-box">
    <a-card
      :tab-list="tabList"
      :active-tab-key="props.repType"
      @tabChange="onTabChange"
    >
      <template #customTab="{ key, tab, icon }">
        <component :is="icon" />{{ tab }}
      </template>

      <!-- 文本 -->
      <div v-if="props.repType === 'text'" class="gz-message-box-content">
        <a-textarea v-model:value="vdata.text.repContent" placeholder="请输入内容" :rows="4" />
      </div>
      <!-- 图片 -->
      <div v-if="props.repType === 'image'" class="gz-message-box-content">
        <div v-if="!vdata.image.repUrl && !vdata.image.repMediaId" class="gz-message-box-content-options">
          <!-- 素材库选择 -->
          <div class="gz-message-box-content-options-item">
            <a-button type="primary" @click="onOpenMediaModal('image')">
              <check-outlined />素材库选择
            </a-button>
          </div>
          <!-- 素材上传 -->
          <!-- <div class="gz-message-box-content-options-item">
            <gz-upload-material v-model:src="vdata.image.repUrl" />
          </div> -->
        </div>

        <!-- 已选择素材 或已上传素材 -->
        <div v-else class="gz-message-box-content-selected">
          <a-image :src="vdata.image.repUrl" fallback="@/assets/default-img.svg" />
          <div>{{ vdata.image.repName }}</div>
          <div class="gz-message-box-content-selected-actions" @click="onRemove('image')">
            <delete-outlined />
          </div>
        </div>
      </div>
      <!-- 图文 -->
      <div v-if="props.repType === 'news'" class="gz-message-box-content">
        <div v-if="!vdata.news.repMediaId && !vdata.news.repUrl" class="gz-message-box-content-options">
          <!-- 素材库选择 -->
          <div class="gz-message-box-content-options-item">
            <a-button type="primary" @click="onOpenMediaModal('news')">
              <check-outlined />选择已发布的图文
            </a-button>
          </div>
        </div>

        <!-- 已选择素材 或已上传素材 -->
        <div v-else class="gz-message-box-content-selected">
          <a-image :src="vdata.news.repUrl" fallback="@/assets/default-img.svg" />
          <div>{{ vdata.news.repName }}</div>
          <div class="gz-message-box-content-selected-actions" @click="onRemove('news')">
            <delete-outlined />
          </div>
        </div>
      </div>
      <!-- 语音 -->
      <div v-if="props.repType === 'voice'" class="gz-message-box-content">
        <div v-if="!vdata.voice.repUrl && !vdata.voice.repMediaId" class="gz-message-box-content-options">
          <!-- 素材库选择 -->
          <div class="gz-message-box-content-options-item">
            <a-button type="primary">
              <check-outlined />素材库选择
            </a-button>
          </div>
          <!-- 素材上传 -->
          <div class="gz-message-box-content-options-item">
            <gz-upload-material v-model:src="vdata.voice.repUrl" />
          </div>
        </div>

        <!-- 已选择素材 或已上传素材 -->
        <div v-else class="gz-message-box-content-selected">
          <div>语音名称123123</div>
          <div class="gz-message-box-content-selected-actions">
            <delete-outlined />
          </div>
        </div>
      </div>
      <!-- 视频 -->
      <div v-if="props.repType === 'video'" class="gz-message-box-content">
        <div v-if="!vdata.video.repMediaId" class="gz-message-box-content-options">
          <!-- 素材库选择 -->
          <div class="gz-message-box-content-options-item" style="flex-direction: column;padding: 30px;gap: 20px;align-items: flex-start">
            <a-input v-model:value="vdata.video.title" placeholder="请输入视频标题" style="width: 50%;" />
            <a-input v-model:value="vdata.video.desc" placeholder="请输入视频描述" style="width: 50%;" />
            <a-button type="primary">
              <check-outlined />素材库选择
            </a-button>
          </div>
        </div>

        <!-- 已选择素材 或已上传素材 -->
        <div v-else class="gz-message-box-content-selected">
          <div>语音名称123123</div>
          <div class="gz-message-box-content-selected-actions">
            <delete-outlined />
          </div>
        </div>
      </div>
      <!-- 音乐 -->
      <div v-if="props.repType === 'music'" class="gz-message-box-content">
        <div v-if="!vdata.music.repMediaId" class="gz-message-box-content-options">
          <!-- 素材库选择 -->
          <div class="gz-message-box-content-options-item" style="flex-direction: column;padding: 30px;gap: 20px;align-items: flex-start">
            <a-input v-model:value="vdata.video.title" placeholder="请输入音乐标题" style="width: 50%;" />
            <a-input v-model:value="vdata.video.desc" placeholder="请输入音乐描述" style="width: 50%;" />
            <a-button type="primary">
              <check-outlined />素材库选择
            </a-button>
          </div>
        </div>

        <!-- 已选择素材 或已上传素材 -->
        <div v-else class="gz-message-box-content-selected">
          <div>语音名称123123</div>
          <div class="gz-message-box-content-selected-actions">
            <delete-outlined />
          </div>
        </div>
      </div>
    </a-card>

    <!-- 素材库选择弹窗 -->
    <gz-material-modal ref="gzMediaModalRef" v-model:value="vdata[props.repType]" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, getCurrentInstance, defineExpose, watch, onMounted } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const props = defineProps({
  repType: { type: String, default: 'text' }, // 消息类型, text: 文本, image: 图片, voice: 语音, video: 视频, news: 图文, music: 音乐
  value: { type: Object, default: {} }, // 值
})
const emits = defineEmits(['update:value','update:repType'])

const tabList = [
  { key: 'text', tab: '文本', icon: 'file-outlined' },
  { key: 'image', tab: '图片', icon: 'picture-outlined' },
  // { key: 'voice', tab: '语音', icon: 'phone-outlined' },
  // { key: 'video', tab: '视频', icon: 'play-square-outlined' },
  // { key: 'news', tab: '图文', icon: 'file-image-outlined' },
  // { key: 'music', tab: '音乐', icon: 'customer-service-outlined' },
]

const gzMediaModalRef = ref()

const material = ref({})

let vdata:any = reactive({
  text: {
    repContent: '', // 文本内容
  },
  image: {  // 图片信息
    repMediaId: '', // 素材库id
    repUrl: '', // 图片地址
    repName: '', // 图片名称
  },
  news: {
    repMediaId: '', // 素材库id
    repUrl: '', // 图片地址
    repName: '', // 图片名称
  },
  voice: {  // 语音信息
    repMediaId: '', // 素材库id
    repUrl: '',  // 音频地址
  },
  video: { // 视频信息
    title: '',  // 视频标题
    desc: '', // 视频描述
    repMediaId: '', // 素材库id
  },
  music: {  // 音乐信息
    title: '',  // 音乐标题
    desc: '', // 音乐描述
    repMediaId: '', // 素材库id
    repUrl: '', // 音乐地址
    link: '', // 音乐链接
    heighQualityLink: '', // 高品质音乐链接
  }
})

// 启用双向绑定
watch(() => vdata, (newVal, oldVal) => {
  if(newVal){
    emits('update:value', newVal[props.repType])
  }
}, {deep: true})
// 数据回显
watch(() => props.value, (newVal, oldVal) => {
  if(newVal){
    vdata[props.repType] = newVal
  }
},{ immediate: true })

/**
 * 切换tab
 */
function onTabChange(key: number) {
  if(props.repType !== key){
    emits('update:repType', key)
    emits('update:value', vdata[key])
  }
}

/**
 * 打开素材库选择弹窗 选择素材
 */
function onOpenMediaModal(key: string) {
  gzMediaModalRef.value.show(key)
}

/**
 * 图片素材---------------------
 */
// 删除图片
function onRemove(key){
  vdata[key] = {}
}

/**
 * 暴露属性
 */
defineExpose({
  data: vdata
})

</script>

<style lang="less" scoped>
  .gz-message-box{
    width: 700px;

    /deep/ .ant-card-body{
      padding: 24px !important;
    }
    .gz-message-box-content{

      .gz-message-box-content-options{
        display: flex;
        gap: 10px;
        align-items: center;
        .gz-message-box-content-options-item{
          border: 1px solid #e8e8e8;
          padding: 60px 0;
          flex: 1;
          display: flex;
          justify-content: center;
        }
      }
      .gz-message-box-content-selected{
        margin: 0 auto;
        width: 350px;
        padding: 24px;
        box-sizing: border-box;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
        /deep/ img{
          width: 100%;
          aspect-ratio: 16 / 9;
          object-fit: cover;
        }

        .gz-message-box-content-selected-actions{
          width: 50px;
          height: 50px;
          margin: 0 auto;
          font-size: 20px;
          text-align: center;
          line-height: 50px;
          border-radius: 50%;
          background: #f56c6c;
          color: #fff;
          cursor: pointer;
          &:hover{
            background: #f78d8d;
          }
        }
      }
    }

    .gz-message-box-save{
      margin-top: 24px;
      text-align: center;
    }


  }
</style>